<template>
    <div class="works" >         
        <van-nav-bar title="全部作品" :border="false">
            <router-link to="/person" slot="left" class="back">
                <img src="http://qxkmdhmin.hn-bkt.clouddn.com/back.png"/>
            </router-link>
        </van-nav-bar>      
        <!-- 头像与昵称 -->
        <van-row class="head">
            <van-col span="22" >
                <van-image round width="2.5rem" height="2.5rem"
                :src="headimg" class="headimg"/>
                <span class="nicheng">{{uname}}</span>                       
            </van-col>
            <van-col span="2">
                <img src="../assets/more.png" alt="" @click="more()">
            </van-col>
        </van-row>
    
        <!-- 作品内容 -->
        <van-row class="main">                     
            <div class="text">{{text}}</div>                                      
        </van-row>  
        <!-- 作品图片 -->         
        <img :src="`${item}`" alt=""  class="workImg" v-for="(item, i) in worksImg"  :key="i">
        
        <!-- 点赞与评论 -->
        <van-row class="dianping">    
            <van-col span="6">
                <img  v-if="i%2==0" @click="dianzan()" src="../assets/good.png" alt="" class="dianzan">
                <img  v-else  @click="dianzan()" src="../assets/beforeGood.png" alt="">
                <span>赞</span>
            </van-col>    
            <van-col span="6">
                <img src="../assets/comment.png" alt=""> 
                <span>评论</span> 
            </van-col>                                                                                    
        </van-row> 
                                     
    </div>
</template>

<script>
export default {
    components: {},
    data(){
        return{         
           active: 0,
           headimg: 'https://img01.yzcdn.cn/vant/cat.jpeg',
           uname: '衣者涵镜',
           text:'hahhahhhhhdfgdfgfgfdghjfjdsjdfhd哈哈哈哈大会的哈哈哈大会是否收到回复',
           worksImg:['http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan.jpg','http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan2.jpg',
           'http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan.jpg','http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan2.jpg',
           'http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan.jpg','http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan2.jpg',
           'http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan.jpg','http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan2.jpg'
           ],
           i:1 ,   //控制点赞与取消点赞
           write:''
        }
    },
    methods:{
        dianzan(){
            this.i++;
        },
        more(){
          
        }

    },
    mounted(){
        this.axios.get(`/works/getWorks`).then(res=>{
            console.log(res.data.result);
                     
        })

    }
}
</script>


<style lang="scss">
.works{
    padding:0 .5rem;
   
    .back{
        margin-left:-1rem;
    }
    .head{
        margin-top:1.5rem;
    }
    .headimg{
        vertical-align: middle;
        margin-right: 0.5rem;
    }
    .nicheng {
       font-weight: bold;
       font-size: 18px;
       font-family: "微软雅黑";
    }
    .text{
        font-size: 18px;
        margin:0.5rem 0;
        word-wrap:break-word;  /*自动换行*/
        line-height: 2rem;
    }
    .workImg{
        width: 31.5%;
        margin: 0 6px 6px 0;
        border-radius:5px;
    }
    .dianping span{
         margin:.4rem;
    }
    .dianzan{
        width: 23px;
    }
}
</style>